<template>
  <div>
    <!-- :class="对象/数组"
        重点: (1) 传对象 :class="obj"
        {键1: 值1, 键2: 值2}  如果值为true 会渲染健 类名就是键
        {pink: true} class里就会多一个pink类名
        {pink:false} class里就不会有pink类名
     -->
    <h3>动态设置类名</h3>
    <div class="box" :class="obj"></div>
    <div class="box" :class="{pink: isPink}"></div>
  <!-- 数组形式了解即可,基本不用 -->
    <div :class="arr"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        pink: true
      },
      isPink: false,
      arr: ['box', 'orange']
    }
  }
}
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #000;
}
.pink {
  background: pink;
}
.orange {
  background: orange;
}
</style>